<template>
  <view>
<!--    <u-navbar :is-back="false" title="详情1">-->
<!--      <view class="slot-wrap">-->
<!--        <u-icon name="arrow-left" v-if="flagShow" @click="goBack"></u-icon>-->
<!--      </view>-->
<!--    </u-navbar>-->
    <u-navbar :custom-back="goBack"  title="详情">
    </u-navbar>
    <view class="detail">
      <swiper indicator-dots="true">
        <swiper-item v-for="item in details.pics" @click="preImage(item)">
          <image :src="item.pics_big"></image>
        </swiper-item>
      </swiper>
      <view class="box1">
        <view class="price">
          <text>￥{{details.goods_price}}</text>
          <text>￥{{details.goods_price+2000}}</text>
        </view>
        <view class="goods_name">{{details.goods_name}}</view>
      </view>
      <view class="line"></view>
      <view class="box2">
        <view>货号：{{details.goods_cat}}</view>
        <view>库存：{{details.goods_number}}</view>
      </view>
      <view class="line"></view>
      <view class="box3">
        <view class="tit">{{details.attrs[0].attr_value+'详情介绍'}}</view>
        <rich-text :nodes="details.goods_introduce"></rich-text>
      </view>
      <view class="goods_nav">
        <uni-goods-nav :fill="true"  :options="options" :button-group="buttonGroup"  @click="onClick" @buttonClick="buttonClick" ></uni-goods-nav>
      </view>
    </view>
  </view>
</template>

<script>
	import uniGoodsNav from '../../common/uni-goods-nav/uni-goods-nav.vue'
  import UIcon from "../../uview-ui/components/u-icon/u-icon";
  import UButton from "../../uview-ui/components/u-button/u-button";
	export default {
		components:{UButton, UIcon, uniGoodsNav},
		data() {
			return {
        flagShow: true,
        flagShare: false,
        background: {
          backgroundColor: '#001f3f',

          // 导航栏背景图
          // background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
          // 还可以设置背景图size属性
          // backgroundSize: 'cover',

          // 渐变色
          // backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
        },
				details:{},
				goods_id:null,
				options: [
					{
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/kefu.png',
						text: '客服'
					}, {
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/dianpu.png',
						text: '店铺'
					}, {
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/carts.png',
						text: '购物车',
						info: 12
					},
				],
				buttonGroup: [
					{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			}
		},
		onLoad(options) {
			this.goods_id=options.goods_id
			this.getData()
      let app = getApp()
      this.flagShare = app.globalData.systemScens
		},

    // 分享到朋友圈
    onShareTimeline(){},
		methods: {
      goBack(){
        let pages = getCurrentPages()    //获取加载的页面
        let currentPage = pages[pages.length-1]    //获取当前页面的对象
        let options = currentPage.options    //如果要获取url中所带的参数可以查看options
        // this.flagShare = localStorage.getItem('flagShare')
        if(options.detail){
          uni.switchTab({
            url: '/pages/index/index'
          }) //参数拼接在后面即可
        }else {
          uni.navigateBack()
        }
        // uni.switchTab({
        //   url: '/pages/index/index'
        // }) //参数拼接在后面即可
      },
			async getData(){
				const res = await this.http({
					url:'/api/public/v1/goods/detail?goods_id='+this.goods_id
				})
				this.details=res.data.message
				console.log(this.details)
			},
			preImage(item){
				const urls =  this.details.pics.map((item)=>item.pics_big_url)
				uni.previewImage({
					current:item.pics_big_url,
					urls
				})
			},
			onClick (e) {
				// uni.showToast({
				// 	title: `点击${e.content.text}`,
				// 	icon: 'none'
				// })
				console.log(e)
			},
			buttonClick (e) {
				console.log(e)
				// this.options[2].info++
			}
		}
	}
</script>

<style lang="scss" scoped>
.slot-wrap {
  display: flex;
  align-items: center;
  /* 如果您想让slot内容占满整个导航栏的宽度 */
  /* flex: 1; */
  /* 如果您想让slot内容与导航栏左右有空隙 */
  /* padding: 0 30rpx; */
}
.detail{
	swiper{
		height: 500rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.box1{
		padding: 10rpx;
		.price{
			font-size: 35rpx;
			color: $shop-color;
			line-height: 80rpx;
			text:nth-child(2){
				text-decoration: line-through;
				color: #ccc;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
		.goods_name{
			font-size: 32rpx;
			line-height: 60rpx;
		}
	}
	.line{
		height: 15rpx;
		width: 750rpx;
		background-color: #eee;
	}
	.box2{
		padding: 0 10rpx;
		font-size: 32rpx;
		line-height: 60rpx;
	}
	.box3{
		.tit{
			font-size: 32rpx;
			padding-left: 10rpx;
			border-bottom: 1px solid #eee;
			line-height: 60rpx;
		}
	}
	.goods_nav {
		position: fixed;
		bottom:0;
		width: 100%;
	}
}
</style>
